<template>
    <main-wrap :noFixed="true" bodyBg="none">
        <div class="incomeCon">
            <div class="verticaScroll">
                <ul class="incomeList">
                    <li @click="openDg(1)" v-if="incomeData.totalAmount">
                        <h5 v-t="'income.text1'">My Trading Income</h5>
                        <div class="total">
                            <p><span v-t="'income.text2'">Accumulated Income</span>（$）</p>
                            <div class="amount">{{incomeData.totalAmount.decimalFourString}}</div>
                        </div>
                        <div class="incTabBox">
                            <div class="item">
                                <p v-t="'income.text6'">Today</p>
                                <div class="amount">{{incomeData.todayAmount.decimalTwoString}}</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text7'">thisweek</p>
                                <div class="amount">{{incomeData.weekAmount.decimalTwoString}}</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text8'">Thismonth</p>
                                <div class="amount">{{incomeData.monthAmount.decimalTwoString}}</div>
                            </div>
                        </div>
                    </li>
                    <li @click="openDg(2)" v-if="data2.totalBonus">
                        <h5 v-t="'income.text3'">My Advertising Income</h5>
                        <div class="total">
                            <p><span v-t="'income.text2'">Accumulated Income</span>（$）</p>
                            <div class="amount">{{data2.totalBonus.decimalFourString}}</div>
                        </div>
                        <div class="incTabBox">
                            <div class="item">
                                <p v-t="'income.text6'">Today</p>
                                <div class="amount">{{data2.todayBonus.decimalTwoString}}</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text7'">thisweek</p>
                                <div class="amount">{{data2.weekBonus.decimalTwoString}}</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text8'">Thismonth</p>
                                <div class="amount">{{data2.monthBonus.decimalTwoString}}</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <h5 v-t="'income.text4'">My Operation Placement Income</h5>
                        <div class="total">
                            <p><span v-t="'income.text2'">Accumulated Income</span>（$）</p>
                            <div class="amount">--</div>
                        </div>
                        <div class="incTabBox">
                            <div class="item">
                                <p v-t="'income.text6'">Today</p>
                                <div class="amount">--</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text7'">thisweek</p>
                                <div class="amount">--</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text8'">Thismonth</p>
                                <div class="amount">--</div>
                            </div>
                        </div>
                    </li>
                    <li v-if="data3.totalAmount" @click="openDg(4)">
                        <h5 v-t="'income.text5'">My Other Income</h5>
                        <div class="total">
                            <p><span v-t="'income.text2'">Accumulated Income</span>（$）</p>
                            <div class="amount">{{data3.totalAmount.decimalFourString}}</div>
                        </div>
                        <div class="incTabBox">
                            <div class="item">
                                <p v-t="'income.text6'">Today</p>
                                <div class="amount">{{data3.todayAmount.decimalTwoString}}</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text7'">thisweek</p>
                                <div class="amount">{{data3.weekAmount.decimalTwoString}}</div>
                            </div>
                            <div class="item">
                                <p v-t="'income.text8'">Thismonth</p>
                                <div class="amount">{{data3.monthAmount.decimalTwoString}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="inc-charts-box">
                    <data-chart/>
                </div>
            </div>
        </div>
        <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="5">
             <trade-income-record v-if="showIndex==1"/>
             <ad-income-record v-else-if="showIndex==2"/>
             <other-income-record v-else-if="showIndex==4"/>
        </my-dailog>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import dataChart from './components/dataChart.vue'
import tradeIncomeRecord from './components/tradeIncomeRecord.vue'
import adIncomeRecord from './components/adIncomeRecord.vue'
import otherIncomeRecord from './components/otherIncomeRecord.vue'
import myDailog from '@/components/myDailog.vue'
import { useI18n } from 'vue-i18n'
export default {
    components:{
        mainWrap,
        dataChart,
        tradeIncomeRecord,
        adIncomeRecord,
        otherIncomeRecord,
        myDailog
    },
    setup(){
        const store = useStore()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            showIndex:1,
            incomeData:{},
            data2:{},
            data3:{}
        })

        onMounted(()=>{
            getTransactionIncome()
            getMyAdsIncome()
            getMyOtherIncome()
        })
        // 我的交易收入
        const getTransactionIncome = ()=>{
            store.dispatch('capital/get_my_transaction_income',{
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
                state.incomeData = res.data
            })
        }
        // 我的广告收入
        const getMyAdsIncome = ()=>{
            store.dispatch('capital/get_my_ads_income',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data2 = res.data
            })
        }
        // 我的其他收入
        const getMyOtherIncome = ()=>{
            store.dispatch('capital/get_my_other_income',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data3 = res.data
            })
        }

        const openDg = (flag)=>{
            state.showIndex = flag
            state.showFlag = true 
        }   

        return {
            ...toRefs(state),
            openDg
        }
    }
}
</script>

<style lang="scss" scoped>
.incomeCon{
    padding: 30px 30px 0 0;
    font-family: Inter-Medium, Inter;
    font-weight: 500;
    &.hhyyhhuu{
        height: 100%;
        .verticaScroll{
            display: flex;
            height: 100%;
            align-items: center;
        }
    }
    .verticaScroll{
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
    }
    .incomeList{
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        padding: 0;
        margin: 0;
        li{
            flex: 1;
            min-width: 420px;
            height: 310px;
            background: url(/images/capital/inc1.png) left top no-repeat;
            background-size:100% 100% ;
            padding: 0 30px;
            &+li{
                margin-left: 20px;
            }
            h5{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26px;
                height: 90px;
                line-height: 32px;
                font-family: Poppins-SemiBold Italic, Poppins;
                font-weight: normal;
                color: #C5FAFF;
                line-height: normal;
                text-shadow: 0px 0px 6px #07A3FB;
                //-webkit-background-clip: text;
                //-webkit-text-fill-color: transparent;
                padding: 0;
                margin: 0;
                padding: 0;
                font-weight: 500;
                text-align: center;
            }
            .total{
                height: 100px;
                width: 100%;
                background: rgba(103,248,255,0.2000);
                line-height: normal;
                text-align: center;
                padding: 10px 10px 0 10px;
                p{
                    font-size: 20px;
                }
                .amount{
                    font-size: 34px;
                }
            }
            .incTabBox{
                display: flex;
                margin: 20px 0 0 0;
                .item{
                    flex: 1;
                    height: 100px;
                    text-align: center;
                    p{
                        color: rgba(255,255,255,0.5000);
                        font-size: 22px;
                    }
                    .amount{
                        font-size: 26px;
                    }
                }
            }
        }
    }
    .inc-charts-box{
        //height: 600px;
        width: 100%;
        padding: 20px 0 0 0;
        background: url(/images/dgbg4.png) left top no-repeat;
        background-size: 100% 100%;
        margin: 30px 0;
    }
}
    
</style>